<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span>
            <!-- card title -->
            <PageTools>
              <!-- 插入到left插槽位置 -->
              <template #left>
                <span>总计{{ total }}条数据</span>
              </template>
              <!-- 插入到right插槽位置 -->
              <template #right>
                <el-button
                  type="primary"
                  size="small"
                  @click="$router.push('/import')"
                >
                  导入excel
                </el-button>
                <el-button type="primary" size="small" @click="exportEmployees">
                  导出excel
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="showDialog = true"
                >
                  新增员工
                </el-button>
              </template>
            </PageTools>
          </span>
        </div>
        <!-- card body -->
        <!-- :default-sort='{prop:'',order:''}' 可以指定当前页加载后,数据按照哪一列进行排序
        prop指定排序列
        order排序方式:ascending 升序 descending 降序
        -->
        <el-table border :data="list">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="workNumber" label="工号" />
          <el-table-column prop="formOfManagement" label="聘用形式">
            <template #default="{ row }">
              <p>{{ formOfManagement(row.formOfManagement) }}</p>
            </template>
          </el-table-column>

          <el-table-column prop="departmentName" label="部门" />
          <!--sortable 开启当前列数据排序(可点击)=>前端假排序(只能排序一页的数据) -->
          <el-table-column sortable prop="timeOfEntry" label="入职时间">
            <template #default="{ row }">
              {{ FormData(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态">
            <el-switch v-model="active"></el-switch>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{ row }">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            :total="total"
            :current-page="params.page"
            :page-size="params.size"
            :page-sizes="[10, 5, 2]"
            layout="prev, pager, next ,sizes"
            @current-change="changePage"
            @size-change="sizeChange"
          />
        </el-row>
      </el-card>
    </div>
    <AddEmployee
      :show-dialog="showDialog"
      @closeDialog="closeDialog"
    ></AddEmployee>
  </div>
</template>
<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
// 导入数据字典(枚举类型)
import dataTypes from '@/api/constant/employees.js'
import dayjs from 'dayjs'
import AddEmployee from '@/views/employees/components/add-employee.vue'

/**
 * 格式化el-table某一列数据:
 * 1.适用作用域插槽获取当前行数据
 * 2.在methods定义格式化的
 */
export default {
  components: {
    AddEmployee
  },

  data () {
    return {
      showDialog: false,
      active: true,
      list: [],
      // 分页参数
      params: {
        page: 1,
        size: 5
      },
      // list总条数
      total: 0
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 导出员工列表的数据
    async exportEmployees () {
      // 按需加载js模块(懒加载)
      const res = await import('@/utils/Export2Excel.js')
      console.log('模块导出方法:', res)
      const maps = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 导出的头
      const header = Object.keys(maps)
      // 过滤头
      const filterHeader = Object.values(maps)
      // 转换二维数组
      const data = this.tarnsformList(this.list, filterHeader)
      res.export_json_to_excel({
        header: header, // 表头
        data: data,
        filename: 'textExport', // 导出文件名
        autoWidth: 'true', // 单元格是否要自适应宽度
        bookType: 'xlsx'// 导出文件类型
      })
    },
    // 把list列表数据转换成二维数组
    tarnsformList (list, filterHeader) {
      /**
       * 1.准备一个空数组=>存储转换的结果
       * 2.第一层循环=>当前也得员工列表数据=>forEach
       * 3.第二层循环=>循环当前员工对象数据=>for in=>{}
       *    1.创建一个空数组=>只存value值
       *    2.然后把存完值的空数组push到外层定义的数组中
       * 4.返回处理完的结果
       */
      const secondArr = []
      list.forEach(item => {
        const newArr = []
        for (const key in item) {
          // 根据指定头=>过滤数据=>只留下指导出的数据项
          if (filterHeader.includes(key)) {
            // 判断formOfEmployment需要格式化后push
            if (key === 'formOfEmployment') {
              newArr.push(this.formOfManagement(item[key]))
            } else {
              newArr.push(item[key])
            }
          }
        }
        secondArr.push(newArr)
      })
      return secondArr
    },
    // 时间格式化
    FormData (value, str = 'YYYY-MM-DD') {
      return dayjs(value).format(str)
    },
    // 格式化聘用形式
    formOfManagement (type) {
      // 格式化聘用形式=>通过数据字典=>根据数字,找到数字代表的含义
      // console.log('数据字典:', dataTypes.hireType)
      /**
       * 1.生成映射关系=>{1:'正式',2:'非正式'}
       * 2.根据映射关系找对应数字的value值
       */
      const maps = {}
      dataTypes.hireType.forEach(item => {
        maps[item.id] = item.value
      })
      console.log(maps)
      return maps[type]
    },
    async getList () {
      const res = await getEmployeeList(this.params)
      // console.log('获取员工列表:', res)
      this.list = res.rows
      this.total = res.total
    },
    changePage (newPage) {
      console.log(newPage)
      this.params.page = newPage
      this.getList()
    },
    sizeChange (size) {
      this.params.size = size
      this.getList()
    },
    // 点击删除
    delEmployee (id) {
      this.$confirm('确认删除吗?', '提示').then(async () => {
        await delEmployee(id)
        this.$message.success('删除成功!')
        /**
         * 组件库bug:处理最后一页全部删除完后列表页码正确,但数据显示错误问题(刷新列表使用的是上次)
         * 解决:解决页码问题错误问题,使用正确页码发送请求刷新
         * 步骤
         * 1.重新计算页码=>公式:总条数-1/每页条数=页码
         * 2.和之前的页码做对比=>条件:之前页码>重新计算页码(不存在)=>修正页码
         */
        const newPage = Math.ceil((this.total - 1) / this.parpams.size)
        // this.params.page = newPage
        if (newPage > 0) {
          this.params.page = this.params.page > newPage ? newPage : this.params.page
        }
        this.getList()
      }).catch(() => { })
    },
    closeDialog () { this.showDialog = false }

  }
}
</script>

<style lang="scss" scoped>
</style>
